<template>
	<view class="container bar">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view class="goods-section padding-top-xs">
			<!-- 商品列表 -->
			<view class="g-item" @click="naviTo(data.paylog.setting.redirect)">
				<image :src="data.paylog.setting.cover"></image>
				<view class="right">
					<text class="title clamp text-cut padding-bottom-xs">{{data.paylog.setting.title}}</text>
					<text class="spec">{{data.paylog.setting.summary}}</text>
					<view class="price-box">
						<text class="price text-red text-boldm">￥{{data.paylog.actual}}</text>
						<text class="number">x 1</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<view class="cell-icon">
					券
				</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip" :class="data.paylog.cid==0?'disabled':'active'">
					{{data.paylog.cid==0?'未使用优惠券':'使用优惠券抵扣'}}
				</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell-icon hb">
					折
				</view>
				<text class="cell-tit clamp">会员折扣</text>
				<text class="cell-tip active" v-if="data.paylog.discount>0">会员专享{{data.paylog.discount}}折优惠</text>
				<text class="cell-tip disabled" v-else>暂无可用会员折扣</text>
			</view>
			<view class="yt-list-cell b-b">
				<view class="cell-icon lpk">
					抵
				</view>
				<text class="cell-tit clamp">积分抵扣</text>
				<text class="cell-tip text-green" v-if="data.paylog.deduct>0">使用积分抵扣{{data.paylog.deduct}}元</text>
				<text class="cell-tip disabled" v-else>未使用积分抵扣</text>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单编号</text>
				<text class="cell-tip" @click="docopy(data.paylog.tid)">{{data.paylog.tid}}<text class="cuIcon-copy"></text></text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单原价</text>
				<text class="cell-tip">￥{{data.paylog.actual}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠金额</text>
				<text class="cell-tip red">-￥{{data.discountamout}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">还需支付</text>
				<text class="cell-tip red">￥{{data.paylog.amount}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">创建时间</text>
				<text class="cell-tip">{{data.paylog.createtime}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单状态</text>
				<text class="cell-tip" :class="data.paylog.status==1?'text-green':'text-gray'">{{data.paylog.state}}</text>
			</view>
			<view v-if="data.paylog.status==1">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">支付时间</text>
					<text class="cell-tip">{{data.paylog.paydate}}</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">支付方式</text>
					<text class="cell-tip">{{data.paylog.payment}}</text>
				</view>
			</view>
		</view>
		<view v-if="data.customerhotline" class="padding text-center">
			<view class="text-lg" @click="dophonecall(data.customerhotline)">
				对此订单有疑问？<text class="text-yellow">点此联系客服</text>
			</view>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	
	export default {
		data() {
			return {
				tid:"",
				data:{
					"title": "订单详情",
					"discountamout":"",
					"customerhotline":"",
					"paylog": {
						"id": 0,
						"uniacid": 0,
						"uid": 0,
						"nickname": "",
						"module": "",
						"tid": "",
						"nid": "",
						"cid": 0,
						"amount": 0.00,
						"actual": 0.00,
						"deduct": 0.00,
						"discount": 0.0,
						"lectoruid": 0,
						"proportion": 0,
						"brokerage": 0.00,
						"commission": 0.00,
						"profit": 0.00,
						"setting": {
							"summary": "",
							"title": "",
							"cover": "",
							"redirect": ""
						},
						"status": "",
						"state": "",
						"remark": "",
						"paytime": "",
						"addtime": "",
						"dateline": "",
						"createtime": "",
						"paydate": "",
						"payment": ""
					}
				}
			}
		},
		onLoad(options) {
			if(typeof(options.tid)=='undefined' || !options.tid) return core.toast('参数错误：无效的订单号');
			if(core.userinfo.uid==0) return core.toast('请先登录','login');
			this.tid = options.tid;
			this.initData('order/detail',{tid:this.tid},function(res){
				if(res.paylog.status==0) return core.navito('order/create',{tid:res.paylog.tid},1);
			});
		},
		onShow() {
			
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			dophonecall(num){
				return uni.makePhoneCall({
					phoneNumber:num
				})
			},
			docopy(data){
				return core.copy(data);
			}
		}
	}
</script>

<style lang="scss">
	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;
	
		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}
	
		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}
	
		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}
	
		.g-item {
			display: flex;
			margin: 20upx 30upx;
	
			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}
	
			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}
	
			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}
	
			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}
	
			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;
	
				.price {
					margin-bottom: 4upx;
				}
				.number{
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}
	
			.step-box {
				position: relative;
			}
		}
	}
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}
	
	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;
	
		&.cell-hover {
			background: #fafafa;
		}
	
		&.b-b:after {
			left: 30upx;
		}
	
		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;
	
			&.hb {
				background: #ffaa0e;
			}
	
			&.lpk {
				background: #3ab54a;
			}
	
		}
	
		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}
	
		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}
	
		.cell-tip {
			font-size: 26upx;
	
			&.disabled {
				color: $font-color-light;
			}
	
			&.active {
				color: $base-color;
			}
			&.red{
				color: $base-color;
			}
		}
	
		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}
	
		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
	
</style>
